<template>
    <div class="room-page">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="昵称">
                <el-input v-model="formInline.nickname" placeholder="昵称" clearable />
            </el-form-item>
            <el-form-item label="角色">
                <el-input v-model="formInline.rolename" placeholder="角色" clearable />
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="formInline.username" placeholder="用户名" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-button type="primary" @click="openDialog('新增')">新增角色</el-button>
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="id" label="角色编号" />
            <el-table-column prop="rolename" label="角色名称" />
            <el-table-column prop="username" label="username" />
            <el-table-column prop="nickname" label="nickname" />
            <el-table-column prop="role" label="角色标识" />
            <el-table-column prop="state" label="状态">
                <template #default="{ row }">
                    <el-switch v-model="row.state" inline-prompt active-text="已启用" inactive-text="已禁用" />
                </template>
            </el-table-column>
            <el-table-column prop="tip" label="备注" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button @click="openDialog('修改', row)">修改</el-button>
                    <el-button type="danger" @click="handleDelete(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 抽屉 -->
        <el-drawer v-model="dialog" title="I have a nested form inside!" :before-close="handleClose" direction="ltr"
            class="demo-drawer">
            <div class="demo-drawer__content">
                <el-form :model="form">
                    <el-form-item label="username" :label-width="formLabelWidth">
                        <el-input v-model="form.username" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="password" :label-width="formLabelWidth">
                        <el-input v-model="form.password" autocomplete="off" />
                    </el-form-item>

                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">Cancel</el-button>
                    <el-button type="primary" :loading="loading" @click="onClick">
                        {{ loading ? 'Submitting ...' : 'Submit' }}
                    </el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>


<script setup>
// import axios from 'axios';
import request from '@/untils/request';
import { ref, reactive } from 'vue';
import { ElDrawer, ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'

let timer = ref(null)
const list = ref([])
const dialog = ref(false)
const loading = ref(false)
const form = ref({
    username: '',
    password: ''
})
const formInline = reactive({
    username: '',
    nickname: '',
    rolename: '',
})

// 打开抽屉
const openDialog = (val, row) => {
    console.log(row, 'row');

    dialog.value = true
    if (val === '新增') {
        form.value = {}
    } else {
        // 数据回填
        form.value = { ...row }
    }

}

// 确认按钮
const onClick = () => {
    loading.value = true
    // 通过form.value对象中的id进行判断，有id就表示是修改，没有就是新增
    if (form.value.id) {
        console.log(22222222);
        
        request.post('/user', form.value).then(res => {
            console.log(res, '11111111');
            getData()
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
            setTimeout(() => {
                loading.value = false
                dialog.value = false
            }, 400)
        })
    } else {
        // 新增角色接口
        request.post('/register', form.value).then(res => {
            if (res.data.code === 10000 && res.status === 200) {
                getData()
                ElMessage({
                    message: '新增成功',
                    type: 'success',
                })
                setTimeout(() => {
                    loading.value = false
                    dialog.value = false
                }, 400)
            }
        })
    }
}

// 删除事件
const handleDelete = async (id) => {
    const resp = await request.delete('/user', { params: { id } })
    if (resp.data.code === 10000 && resp.status === 200) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        getData()
    }
}

// 关闭按钮
const handleClose = (done) => {
    if (loading.value) {
        return
    }
    ElMessageBox.confirm('Do you want to submit?')
        .then(() => {
            loading.value = true
            timer.value = setTimeout(() => {
                done()
                // 动画关闭需要一定的时间
                setTimeout(() => {
                    loading.value = false
                }, 400)
            }, 2000)
        })
        .catch(() => {
            // catch error
        })
}

// 请求角色列表数据
const getData = () => {
    request.get('/users', { params: { ...formInline }}).then(res => {
        console.log(res);
        list.value = res.data
    })
}

getData()

</script>

<style scoped>
/* .room-page{
    width: 100vw;
    height: 100vh;
} */
</style>